﻿@using Eking.Framework
@{
    this.RequireSet("QuickShow_MortageLoanCalculator");
}

<div class="mortgageLoan">
    <div class="section1">
        LOAN REPAYMENTS
    </div>
    <div class="section2">
        @* Params area*@
        <div class="params">
            <div class="sliderInput">
                <span class="paramTitle">Loan Amount</span>
                <span id="slider1" class="paramSlider"></span>
                <input class="paramInput" style="width: 78px" />
                <span>$</span>
            </div>
            <div class="sliderInput">
                <span class="paramTitle">Interest Rate</span>
                <span class="paramSlider"></span>
                <input class="paramInput" style="width: 48px" />
                <span>%</span>
            </div>
            <div class="sliderInput">
                <span class="paramTitle">Loan Term</span>
                <span class="paramSlider"></span>
                <input class="paramInput" style="width: 48px" />
                <span>years</span>
            </div>

            <div>
                <span class="paramTitle">Repayment Rreq</span>
                <input type="radio" name="group1" />Mothly
                <input type="radio" name="group1" />Fornightly
                <input type="radio" name="group1" />Weekly
            </div>
            <div>
                <span class="paramTitle">Repayment Type</span>
                <input type="radio" name="group2" />Principal & Interest
                <input type="radio" name="group2" />Interest Only
            </div>
        </div>
        <div class="paramsInfo">
            <h1>Monthly payment: <span>$2,097.64</span></h1>
            <h1>Total repayments: <span></span>$755,151.67</h1>
            <h1>Total interest payable: <span>$455,151.67</span></h1>
        </div>
        @* Chart area *@
        <div class="chartArea" style="position: relative">
            <div id="drawer" style="height: 100%"></div>
            <div style="position: absolute; right: 10px; top: 10px">
                <div style="margin: 5px; display: block">
                    <span style="width: 20px; height: 10px; background: rgb(102, 102, 102); float: left;"></span><span style="float: left; padding-left: 5px">Total</span>
                </div>
                <div style="margin: 5px;display: inline-block">
                    <span style="width: 20px; height: 10px; background: rgb(160, 206, 87); float: left; "></span><span style="float: left; padding-left: 5px">Principal</span>
                </div>
            </div>
        </div>
    </div>
</div>

